/***************************************************************
    These are the containing variables for all the functions
***************************************************************/

sliderInt = 1;
sliderNext = 2;


/***************************************************************
    jQuery statement that starts all the functions.
***************************************************************/

$(document).ready(function(){
    $('#slider>img#1').fadeIn(500);
    startSlider();
});



/***************************************************************
    This is the main function that controls the slider loop.
***************************************************************/

function startSlider(){
    count = $('#slider>img').size();
    
    loop = setInterval(function(){
        
        if(sliderNext > count){
            sliderNext = 1;
            sliderInt = 1;
        }
        
        $('#slider > img').fadeOut(500);
        $('#slider > img#' + sliderNext).fadeIn(500);
        
        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;
        
    }, 6000)
}



/***************************************************************
    These functions control which direction the buttons are being pressed by the user.
***************************************************************/

function prev(){
    newSlide = sliderInt - 1;
    showSlide(newSlide);
}

function next(){
    newSlide = sliderInt + 1;
    showSlide(newSlide);
}

function stopLoop(){
    window.clearInterval(loop);
}



/***************************************************************
    This function stops the slider once the user begins to use  the next/previous buttons.
***************************************************************/

function showSlide(id){
    stopLoop();
    if(id > count){
        id = 1;
    }else if(id < 1){
        id = count;
    }
        
    $('#slider > img').fadeOut(500);
    $('#slider > img#' + id).fadeIn(500);

    sliderInt = id;
    sliderNext = id + 1;
    startSlider();
}




/***************************************************************
    This function stops the slider once hovered over.
***************************************************************/

$("#slider > img").hover(
    function(){
        stopLoop();
    },
    function(){
        startSlider();
    }
);









